<template>
	<view>
		<view class="flex-row margin-top-xs padding-lr-com text-df text-low">
			<view v-for="(item,index) in newList" :key="index" class="margin-right-sm" @click="select_change(index)">
				<!-- 升降排序 -->
				<view v-if="item.isLifting" class="flex-row">
					<view :class="{'theme-color':item.status>0}">{{item.name}}</view>
					<view class="text-mid">
						<view :class="[item.status==1?'theme-color':'text-low','iconfont', 'icon-shang1']"
							style="height: 12rpx;"></view>
						<view :class="[item.status==2?'theme-color':'text-low','iconfont', 'icon-xia1']" style="height: 12rpx;">
						</view>
					</view>
				</view>
				<!-- 正常 -->
				<view v-else :class="{'theme-color':item.status>0}">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: [{
					name: '综合',
					isLifting: false //是否升降排序
				}, {
					name: '销量',
					isLifting: false //是否升降排序
				}, {
					name: '价格',
					isLifting: true //是否升降排序
				}]
			},
			// 默认选中选项
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				newList: [],
				last_select: 0 //上一次选中
			}
		},
		created() {
			this.$nextTick(() => {
				for (let i = 0; i < this.list.length; i++) {
					this.newList.push({
						name: this.list[i].name,
						status: i == this.current ? 1 : 0, //0 未选中 1已选中（有升降序的代表升） 2 升降序的代表降
						isLifting: this.list[i].isLifting
					})
				}
				this.last_select = this.current
			})
		},
		methods: {
			// 选项切换
			select_change(index) {
				if (this.newList[this.last_select].isLifting && this.newList[index].isLifting) {
					this.newList[index].status == 2 ? this.newList[index].status = 1 : this.newList[index].status += 1
				} else {
					// 恢复上一次选项
					this.newList[this.last_select].status = 0
					this.newList[index].status = 1
				}
				this.last_select = index
				this.$emit('select_change', this.newList[index])
			}
		}
	}
</script>

<style>
</style>